<template>
  <BackgroundBar
    :immersive="false"
    back
    title="基本信息"
    @onBack="handlerBack"
    @onHome="handlerBack"
  />

  <view class="user_avatar lh-pt-40 lh-pb-40">
    <up-image
      :src="`${env.VITE_OSS_BUCKET}${userInfo.profileImageUrl}`"
      width="150rpx"
      height="150rpx"
      shape="circle"
      @click="handlerChooseBgImg"
    ></up-image>
  </view>

  <view v-if="userInfo.userId" class="lh-pl-46 lh-pr-46">
    <up-form
      ref="formRef"
      labelPosition="left"
      :model="userInfo"
      :rules="rules"
      :labelWidth="60"
    >
      <up-form-item label="昵称" prop="userName">
        <up-input
          v-model="userInfo.userName"
          type="userName"
          placeholder="请输入昵称"
          border="bottom"
        ></up-input>
      </up-form-item>
      <up-form-item label="性别" prop="gender">
        <view class="lh-w-[200rpx]">
          <up-radio-group v-model="userInfo.gender">
            <up-radio
              v-for="(item, index) in genderList"
              :key="index"
              :label="item.name"
              :name="item.type"
              activeColor="rgba(54, 161, 238, 1)"
              :customStyle="customStyleItem"
              size="24rpx"
              labelSize="24rpx"
            >
            </up-radio>
          </up-radio-group>
        </view>
      </up-form-item>
      <up-form-item label="微信号" prop="wechatId">
        <up-input
          v-model="userInfo.wechatId"
          placeholder="请输入微信号"
          border="bottom"
        ></up-input>
      </up-form-item>
    </up-form>

    <view class="submitButton lh-mt-78">
      <up-button
        type="primary"
        text="保存"
        shape="circle"
        v-bind="buttonPrimary"
        @click="handlerConfirm"
      ></up-button>
    </view>
  </view>

  <!-- 裁剪工具 -->
  <FullScreen
    ref="fullScreenRef"
    fullType="avatar"
    @confirm="handlerConfirmFull"
  />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import BackgroundBar from '@/components/NavigationBar/background.vue';

import FullScreen from '@/components/FullScreen/index.vue';
import useRouter from '@/hooks/useRouter.js';

// 获取用户api
import useUserInfo from '@/hooks/useUserInfo.js';

const { navigateBack } = useRouter();
const { userInfo, reloadUserInfo, uplodaUserInfo } = useUserInfo();

const formRef = ref(null);
const rules = ref({
  userName: {
    type: 'string',
    required: true,
    message: '请填写姓名',
    trigger: ['blur', 'change'],
  },
  gender: {
    type: 'number',
    required: true,
    message: '请选择性别',
    trigger: ['blur', 'change'],
  },
  wechatId: {
    type: 'string',
    required: true,
    message: '请填写微信号',
    trigger: ['blur', 'change'],
  },
});
const buttonPrimary = {
  color: '#00A0E9',
  customStyle: {
    color: '#fff',
    'font-size': '28rpx',
    'font-weight': 500,
    height: '68rpx',
  },
};

const customStyleItem = {
  color: '#333333',
  'margin-right': '20rpx',
};
const genderList = [
  { name: '男', type: '1' },
  { name: '女', type: '2' },
];

const fullScreenRef = ref(null);
const handlerChooseBgImg = () => {
  fullScreenRef.value.chooseImg();
};

const handlerConfirmFull = (path) => {
  userInfo.value.profileImageUrl = path;
};

const handlerConfirm = () => {
  formRef.value
    .validate()
    .then(async (res) => {
      await uplodaUserInfo(userInfo.value);
      navigateBack({
        delta: 1,
      });
    })
    .catch(console.error);
};

const handlerBack = () => {
  reloadUserInfo();
};
</script>

<style lang="scss">
.user_avatar {
  display: flex;
  justify-content: center;
}
.submitButton {
  width: 100%;
  height: 68rpx;
}
</style>
